<template>
  <div class="home-interface-area">
    <div class="home-top-area">
      <div class="top-bar">
        <h2>首页</h2>
        <i></i>
      </div>
    </div>
    <div class="home-focus-goods">
      <van-swipe @change="onChange" :height="200">
        <van-swipe-item>
          <div class="icon-fun-lis">
            <van-grid :border="false" :column-num="5" icon-size="28px">
              <van-grid-item v-for="item in topIcons" :key="item.text" :icon="item.icon" :text="item.text" />
            </van-grid>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="icon-fun-lis">
            <van-grid :border="false" :column-num="5" icon-size="28px">
              <van-grid-item v-for="item in topIcons" :key="item.text" :icon="item.icon" :text="item.text" />
            </van-grid>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            <i v-for="(item, index) in 2" :key="index" :class="{ active: current === index }"></i>
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="show-content-area">
      <div class="list-content-box">
        <div class="hd">
          <div class="hd-lf">
            <i></i>
            <h2>目标达成</h2>
            <s @click="showPop"></s>
          </div>
          <div class="hd-rt">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" />
              <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
          </div>
        </div>
        <van-divider style="margin: 0" />
        <div class="bd">
          <div class="inner-bd" style="padding: 16px; display: flex; justify-content: center; align-items: center; text-align: center">
            <div class="bd-lf">
              <div class="chart-wrapper">
                <pie-chart :chart-data="pieDeviceData" />
              </div>
              <div class="chart-des">
                <p class="cnum">40897</p>
                <p>首开票客户数</p>
              </div>
            </div>
            <div class="bd-rt">
              <div class="chart-wrapper">
                <pie-chart :chart-data="pieDeviceData2" />
              </div>
              <div class="chart-des">
                <p class="cnum">40976</p>
                <p>开票金额</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-content-box" style="margin: 12px 0 0 0">
        <div class="hd">
          <div class="hd-lf">
            <i></i>
            <h2>业务概况</h2>
            <s></s>
          </div>
          <div class="hd-rt">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option3" />
              <van-dropdown-item v-model="value2" :options="option4" />
            </van-dropdown-menu>
          </div>
        </div>
        <van-divider style="margin: 0" />
        <div class="bd">
          <div class="inner-bd">
            <ul class="data-lis">
              <li>
                <div class="data-row">
                  <p class="t-num">50/200</p>
                  <p class="t-text">客户</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">合同</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">订单</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">采购</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">撤销</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">采退</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">出库</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">入库</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">收款</p>
                </div>
              </li>
              <li>
                <div class="data-row">
                  <p class="t-num">100/&yen;50.8万</p>
                  <p class="t-text">出库</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="list-content-box" style="margin: 12px 0 0 0">
        <div class="hd">
          <div class="hd-lf">
            <i></i>
            <h2>销售趋势</h2>
            <s></s>
          </div>
          <div class="hd-rt3">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value2" :options="option5" />
              <van-dropdown-item v-model="value1" :options="option3" />
              <van-dropdown-item v-model="value2" :options="option4" />
            </van-dropdown-menu>
          </div>
        </div>
        <van-divider style="margin: 0" />
        <div class="bd">
          <div class="inner-bd">
            <div class="bar-chart-wrapper">
              <spy-bar :chart-data="barChartData" />
            </div>
          </div>
        </div>
      </div>
      <div class="list-content-box" style="margin: 12px 0 60px 0">
        <div class="hd">
          <div class="hd-lf">
            <i></i>
            <h2>销售排行</h2>
            <s></s>
          </div>
          <div class="hd-rt3" style="width: 50%">
            <van-dropdown-menu direction="up">
              <van-dropdown-item v-model="value2" :options="option6" />
              <van-dropdown-item v-model="value1" :options="option3" />
              <van-dropdown-item v-model="value2" :options="option4" />
            </van-dropdown-menu>
          </div>
        </div>
        <van-divider style="margin: 0" />
        <div class="bd">
          <div class="inner-bd">
            <div class="your-pr"><b></b><span class="y-pr">你的排名：15</span></div>
            <div class="ft-pr3">
              <div class="col-img">
                <img src="../assets/image/home/r2.png" />
                <div class="text-area">
                  <p class="txt-up">王晓明</p>
                  <p class="txt-dn">480万</p>
                </div>
              </div>
              <div class="col-img col-img-spl">
                <img src="../assets/image/home/r1.png" />
                <div class="text-area">
                  <p class="txt-up">赵晓明</p>
                  <p class="txt-dn">560万</p>
                </div>
              </div>
              <div class="col-img">
                <img src="../assets/image/home/r3.png" />
                <div class="text-area">
                  <p class="txt-up">王晓明</p>
                  <p class="txt-dn">430万</p>
                </div>
              </div>
            </div>
            <div class="pr-list">
              <ul>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">4</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                  <van-divider style="margin: 11px 0" />
                </li>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">5</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                  <van-divider style="margin: 11px 0" />
                </li>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">6</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                  <van-divider style="margin: 11px 0" />
                </li>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">7</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                  <van-divider style="margin: 11px 0" />
                </li>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">8</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明新 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                  <van-divider style="margin: 11px 0" />
                </li>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">9</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                  <van-divider style="margin: 11px 0" />
                </li>
                <li>
                  <div class="li-items">
                    <div class="sex-number">
                      <span class="rp-num">10</span>
                      <div class="rp-name">
                        <i class="boy"></i>
                        <span class="name"> 刘明明 </span>
                      </div>
                    </div>
                    <span class="score-num"> 400 万 </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择型号 -->
    <van-popup v-model="showTipPop" round closeable position="bottom" :style="{ height: '85%' }">
      <div class="pop-layout-area">
        <div class="pop-tit"><i></i><span class="tit">提示说明</span></div>
        <div class="pop-content" style="padding: 24px 0 0 0">
          <div class="bg-tit-box" style="height: 230px; overflow: hidden">
            <div class="bg-hd">
              <span class="bg-tit">资金流水是如何自动生成的</span>
            </div>
            <div class="bg-bd">
              <div class="inner-bg-bd">
                <ol class="ft-lis justified-text">
                  <li>
                    1、在含财务套件的审批单中，可设置企业账户，审批完成后自动生成资金流水的统计，此外可通过<span class="spl-cor">记收入、记支出、</span>批量导入快捷录入数据，录入后也会自动生成统计。<span class="spl-cor">提交审批</span>
                  </li>
                  <li>2、财务套件的使用说明文档，<span class="spl-cor">点击查看</span></li>
                  <li>3、企业账户的使用说明文档，<span class="spl-cor">点击查看</span></li>
                </ol>
              </div>
            </div>
          </div>
          <div class="bg-tit-box">
            <div class="bg-hd">
              <span class="bg-tit">资金余额</span>
            </div>
            <div class="bg-bd">
              <div class="inner-bg-bd">
                <p>资金余额=所有企业账户余额+资金流入-资金流出</p>
              </div>
            </div>
          </div>
          <div class="bg-tit-box" style="height: 198px; overflow: hidden">
            <div class="bg-hd">
              <span class="bg-tit">资金流入</span>
            </div>
            <div class="bg-bd">
              <div class="inner-bg-bd">
                <ol class="ft-lis justified-text">
                  <li>1、资金流入=资金流入类财务套件的审批数据+<span class="spl-cor">记收入</span>的数据+批量导入的收入数据。</li>
                  <li>
                    2、资金流入类财务套件包含:收款、应收回款、备用金还款、转账申请，审批通过后数据自动汇总。<span class="spl-cor">提交审批</span>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import PieChart from './components/PieChart.vue'
import SpyBar from './components/SpyBar.vue'

export default {
  components: {
    PieChart,
    SpyBar
  },
  data() {
    return {
      showTipPop: false,
      pieIntData: {
        species: 43,
        speciesTotal: 100
      },
      pieIntData2: {
        species: 48,
        speciesTotal: 100
      },
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全公司', value: 0 },
        { text: '测试1', value: 1 },
        { text: '测试2', value: 2 }
      ],
      option2: [
        { text: '上月', value: 'a' },
        { text: '测试1', value: 'b' },
        { text: '测试2', value: 'c' }
      ],
      option3: [
        { text: '本人', value: 0 },
        { text: '测试1', value: 1 },
        { text: '测试2', value: 2 }
      ],
      option4: [
        { text: '本月', value: 'a' },
        { text: '测试1', value: 'b' },
        { text: '测试2', value: 'c' }
      ],
      option5: [
        { text: '首开票客户', value: 'a' },
        { text: '测试1', value: 'b' },
        { text: '测试2', value: 'c' }
      ],
      option6: [
        { text: '销售', value: 'a' },
        { text: '测试1', value: 'b' },
        { text: '测试2', value: 'c' }
      ],
      current: 0,
      topIcons: [
        {
          icon: require('../assets/image/home/ii1.png'),
          text: '审批'
        },
        {
          icon: require('../assets/image/home/ii2.png'),
          text: '协作'
        },
        {
          icon: require('../assets/image/home/ii3.png'),
          text: '销售订单'
        },
        {
          icon: require('../assets/image/home/ii4.png'),
          text: '销售退货订单'
        },
        {
          icon: require('../assets/image/home/ii8.png'),
          text: '收款'
        },
        {
          icon: require('../assets/image/home/ii5.png'),
          text: '采购订单'
        },
        {
          icon: require('../assets/image/home/ii6.png'),
          text: '采购退货订单'
        },
        {
          icon: require('../assets/image/home/ii7.png'),
          text: '开票'
        },
        {
          icon: require('../assets/image/home/ii8.png'),
          text: '发票'
        },
        {
          icon: require('../assets/image/home/ii10.png'),
          text: '付款'
        }
      ]
    }
  },
  computed: {
    pieDeviceData() {
      return {
        // tooltip: {
        //   trigger: 'item'
        // },
        series: [
          {
            name: '开票数',
            type: 'pie',
            hoverAnimation: false,
            radius: ['30px', '38px'],
            center: ['50%', '50%'],
            label: {
              show: false,
              itemStyle: {
                borderRadius: 6
              }
            },
            data: [
              {
                value: this.pieIntData.species,
                // name: '开票数',
                label: {
                  show: true,
                  position: 'center',
                  formatter: '{d|{d}}%',
                  rich: {
                    d: {
                      fontSize: 20,
                      color: '#3675f6'
                      // fontWeight: 'bold'
                    }
                  },
                  color: '#333'
                },
                itemStyle: {
                  normal: {
                    color: '#3875f6',
                    borderRadius: 6
                  }
                }
              },
              {
                value: this.pieIntData.speciesTotal - this.pieIntData.species,
                itemStyle: {
                  normal: {
                    color: '#ededed'
                  }
                }
              }
            ]
          }
        ]
      }
    },
    pieDeviceData2() {
      return {
        // tooltip: {
        //   trigger: 'item'
        // },
        series: [
          {
            name: '开票数',
            type: 'pie',
            hoverAnimation: false,
            radius: ['30px', '38px'],
            center: ['50%', '50%'],
            label: {
              show: false,
              itemStyle: {
                borderRadius: 6
              }
            },
            data: [
              {
                value: this.pieIntData2.species,
                // name: '开票数',
                label: {
                  show: true,
                  position: 'center',
                  formatter: '{d|{d}}%',
                  rich: {
                    d: {
                      fontSize: 20,
                      color: '#49bc77'
                      // fontWeight: 'bold'
                    }
                  },
                  color: '#333'
                },
                itemStyle: {
                  normal: {
                    color: '#49bc77',
                    borderRadius: 6
                  }
                }
              },
              {
                value: this.pieIntData2.speciesTotal - this.pieIntData2.species,
                itemStyle: {
                  normal: {
                    color: '#ededed'
                  }
                }
              }
            ]
          }
        ]
      }
    },
    barChartData() {
      return {
        backgroundColor: '#fff',
        grid: {
          top: '20px' // 将顶部的空白设置为0%
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          textStyle: {
            color: '#999', // 设置文本颜色
            fontSize: 14
          },
          formatter: function (params) {
            // params 是一个数组，包含了多个 tooltip 项
            return '<div>' +
              '<p style="color: #999999;margin-bottom:2px">' + params[1].seriesName + '：' +
              params[1].value + '万</p>' +
              '<p style="color: #3875f6;">' + params[0].seriesName + '：' +
              params[0].value + '万</p>' +
              '</div>'
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ['回款金额', '回款笔款'],
          bottom: 0,
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: false // 这里设置为false隐藏X轴刻度
            },
            axisLine: {
              show: false // 隐藏X轴线
            },
            axisLabel: {
              color: '#666', // 这里设置X轴文字颜色为红色
              // fontSize: 9
              fontWeight: 400
            },
            splitArea: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '数量',
            min: 0,
            max: 45000,
            interval: 5000,
            axisLabel: {
              // formatter: '{value} ',
              color: '#666',
              fontSize: 11,
              margin: 0,
              rich: {
                custom: {
                  padding: [0, 0, 0, 10] // 文字与y轴的距离
                }
              },
              formatter: function (value) {
                return `{custom|${value}}` // 使用自定义样式
              }
            },
            splitArea: {
              show: false
            }
          },
          {
            type: 'value',
            // name: '数量',
            min: 0,
            max: 18,
            interval: 2,
            axisLabel: {
              // formatter: '{value} %'
              show: true,
              color: '#666',
              fontSize: 11
            }
          }
        ],
        series: [
          {
            name: '回款金额',
            type: 'bar',
            data: [20000, 37000, 48000, 27500, 35000, 36000, 37000, 32000, 34000, 34000, 36000, 34000, 19000, 18000, 27000, 37000, 31000],
            itemStyle: {
              borderRadius: [6, 6, 0, 0], // 柱体圆角
              color: new echarts.graphic.LinearGradient(
                // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                // 通过修改前4个参数，可以实现不同的渐变方向
                /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                  每项为一个对象，包含offset和color两个参数
                */
                0, 1, 0, 0,
                [
                  { // 代表渐变色从正上方开始
                    offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: 'rgba(115,160,250,0)'
                  }, // 柱图渐变色
                  {
                    offset: 1, // 指100%处的颜色
                    color: '#00A6FF'
                  }
                ]
              )
            }
          },
          {
            name: '回款笔款',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              color: '#eb7e65', // 折线颜色
              width: 2 // 折线宽度
            },
            symbolSize: 6,
            smooth: true,
            color: '#eb7e65',
            data: [10, 1, 3, 2, 3, 1, 2, 2, 5, 8, 3, 3, 2, 1, 5, 2, 9]
          }
        ]
      }
    }
  },
  created() { },
  methods: {
    onChange(index) {
      this.current = index
    },
    showPop() {
      this.showTipPop = true
    }
  }
}
</script>

<style lang="scss" scoped>
.home-interface-area {
  background: url(../assets/image/home/top_bg.png) top center no-repeat;
  min-height: 430px;
  background-size: 100%;
  .home-top-area {
    text-align: center;
    .top-bar {
      padding: 54px 0 26px 0;
      h2 {
        margin: 0;
        padding: 0;
        font-size: 17px;
        color: #fff;
        font-weight: normal;
      }

      i {
        background: url(../assets/image/home/user_switch.png) no-repeat;
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        right: 17px;
        top: 59px;
        background-size: 100%;
      }
    }
  }
  .home-focus-goods {
    width: 100%;
    height: 178px;
    overflow: hidden;
    background: #f6f6f6;
    border-radius: 12px 12px 6px 6px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .custom-indicator {
    position: absolute;
    // right: 16px;
    bottom: 14px;
    text-align: center;
    width: 100%;
    i {
      width: 24px;
      height: 4px;
      background: #fff;
      border-radius: 2px 2px 2px 2px;
      display: inline-block;
      vertical-align: middle;
      &.active {
        background: #3875f6;
      }
    }
  }
  /* 添加上述的 CSS 样式 */
  ::v-deep .echarts-x-axis {
    stroke: transparent !important;
  }
  .echarts-grid {
    display: none !important;
  }

  .echarts-y-axis {
    stroke: transparent !important;
  }
  ::v-deep .van-grid-item__content {
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    padding: 12px 0;
    background-color: transparent;
  }
  ::v-deep .van-dropdown-menu__bar {
    height: auto;
    padding: 0;
    box-shadow: none;
  }
  ::v-deep .van-dropdown-menu__title {
    font-size: 12px;
    color: #666;
  }
  ::v-deep .van-dropdown-menu__title::after {
    font-family: "iconfont" !important;
    font-size: 8px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e626";
    border: none;
    transform: rotate(-90deg);
    margin-top: -12px;
  }
  ::v-deep .van-dropdown-menu__title--down::after {
    transform: rotate(-270deg);
  }
  .icon-fun-lis {
    padding: 12px 0;
  }
  .list-content-box {
    background-color: #fff;
    border-radius: 6px 6px 6px 6px;
    .hd {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px 12px 12px 0px;
    }
    .hd-lf {
      flex: 1;
      i {
        width: 3px;
        margin: 0 12px 0 0;
        height: 15px;
        background: #3875f6;
        border-radius: 0px 2px 2px 0px;
        display: inline-block;
        vertical-align: middle;
      }
      s {
        background: url(./../assets/image/home/help.png) no-repeat;
        width: 14px;
        height: 14px;
        background-size: 100%;
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 7px;
      }
    }
    .bd {
      .img-area {
        text-align: center;
      }
      .inner-bd {
        padding: 12px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        .bd-lf {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .bd-rt {
          flex: 1;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .chart-wrapper {
          margin: 0 10px 0 0;
        }
        .cnum {
          color: #222;
          font-size: 20px;
          margin: 0 0 7px 0;
        }
      }
      .row-item {
        margin: 0 0 8px 0;
      }
    }

    h2 {
      font-size: 16px;
      color: #222222;
      font-weight: 700;
      display: inline-block;
      vertical-align: middle;
      margin: 0;
      padding: 0;
    }
    .hd-rt {
      width: 130px;
    }
    .hd-rt3 {
      width: 60%;
      ::v-deep .van-dropdown-menu__item {
        flex: auto;
      }
    }
  }
  .show-content-area {
    padding: 12px;
  }
  .data-lis {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    .t-num {
      font-size: 14px;
      color: #222;
      margin: 0 0 7px 0;
    }
    .t-text {
      font-size: 12px;
      color: #666;
    }
    li {
      width: 32%;
      margin: 10px 0 0 0;
      text-align: center;
    }
  }
  .ft-pr3 {
    display: flex;
    padding: 24px 0 0 0;
    margin: 0;
    .text-area {
      .txt-up {
        font-size: 12px;
        color: #666;
        margin: -50px 0 7px 0;
      }
      .txt-dn {
        font-size: 15px;
        color: #222;
      }
    }
    .col-img {
      // flex: 1;
      position: relative;
      text-align: center;
      justify-content: space-between;
      img {
        width: 100px;
        height: auto;
      }
    }
    .col-img-spl {
      margin: -24px 13px 0 12px;
    }
  }
  .pr-list {
    padding: 24px 0 0 0;
    ul {
      margin: 0;
      padding: 0;
    }
    .li-items {
      display: flex;
    }
    .sex-number {
      display: flex;
      flex: 1;
      align-items: center;
    }
    i {
      width: 24px;
      height: 24px;
      margin: 0 8px 0 0;
    }
    .boy {
      background: url(../assets/image/home/boy.png) no-repeat;
      background-size: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .rp-num {
      width: 28px;
      text-align: left;
      font-size: 14px;
      color: #999;
    }
    .rp-name {
      color: #666;
      font-size: 14px;
    }
    .score-num {
      color: #666;
      font-size: 14px;
      color: #222;
    }
  }
  .pop-layout-area {
    padding: 20px 12px;
    .spl-cor {
      color: #3875f6;
    }
    .pop-tit {
      text-align: center;
      i {
        background: url(../assets/image/home/tip.png) no-repeat;
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align: middle;
        background-size: 100%;
        margin: 0 7px 0 0;
      }
      .tit {
        font-size: 16px;
        color: #222;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .bg-tit-box {
    background: #f7faff;
    border-radius: 4px;
    padding: 12px;
    margin: 0 0 12px 0;
    .bg-hd {
      font-size: 16px;
      color: #222;
      font-weight: 600;
      margin: 0 0 12px 0;
    }
    .bg-bd {
      color: #666;
      font-size: 14px;
      .inner-bg-bd {
        line-height: 28px;
      }
      ol {
        margin: 0;
        padding: 0;
      }
    }
  }
  .justified-text {
    text-align: justify;
    text-justify: inter-word;
  }

  .justified-text:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
  .your-pr {
    border-radius: 4px;
    background: #f7faff;
    padding: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #222222;
    .y-pr {
      display: inline-block;
      vertical-align: middle;
    }
    b {
      background: url(../assets/image/home/girl.png) no-repeat;
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 7px 0 0;
      background-size: 100%;
    }
  }
}
</style>
